<template>
	<view class="page" :style="{minHeight:$height()}">
		<!-- <view class="bannerBox">
			<video v-if="list[0]" :src="$utils.imagePath(list[0].videoUrl)" style="width: 100%; height: 100%;" maxDuration="100"></video>
		</view>
		<view class="searchBox">
			<u-icon name="search" style="font-size: 36rpx;"></u-icon>
			<u-input v-model="keywords" height="72" style="width: 540rpx; margin-left: 16rpx;" placeholder="搜索相关的资讯" />
			<view class="search" @click="search()">
				搜索
			</view>
		</view>
		<view class="content">
			<view class="titleBox">
				<text>教程</text>
				<view class="kuai"></view>
			</view>
			<view class="info">
				<image src="@/static/image/info.png" style="width: 28rpx; height: 22rpx; margin-right: 16rpx;"></image>
				<view class="infoText">
					购售电业务
				</view>
			</view>
			<view class="item1" v-for="(item,index) in list" :key="index" @click="$next(`/pages/index/courseDetail?id=${item.id}`)">
				<view class="li" style="width: 95%;">
					<text>{{index+1}}</text>
					<text class="u-line-1">{{item.title}}</text>
				</view>
				<u-icon name="play-right-fill" style="font-size: 10rpx;"></u-icon>
			</view>

			
		</view> -->
		<!-- 加载更多 -->
		<!-- <u-loadmore v-if="list.length !== 0" :status="status" :load-text="loadText" />
		<image v-else src="@/static/image/empty.png" mode="widthFix" class="is-empty"></image> -->
	</view>
</template>

<script>
export default {
    data() {
        return {
			// 页面数据初始化状态
			loadText: {
				loadmore: '轻轻上拉，加载更多',
				loading: '努力加载中',
				nomore: '我也是有底线的'
			},
			more: false,
			keywords: '', //关键词
			page: 1, //页码
			limit: 15, //条数
			list: [], //新闻 列表
        }
    },
	onLoad() {
		this.getCourseRes()
	},
	//下拉刷新
	onPullDownRefresh() {
		this.page = 1
		this.getCourseRes()
	},
	//上拉加载
	onReachBottom() {
		if (this.page == 1) {
			return
		}
		if (this.more) {
			this.getCourseRes()
		}
	},
    methods: {
		search(){
			this.page = 1
			this.getCourseRes()
		},
        getCourseRes() {
        	this.$axios.request(this.$api.getCourseRes, "GET", {
        		page: this.page,
        		limit: this.limit,
				keywords:this.keywords,
        		orderField: 'id',
        		order: 'desc'
        	}).then((val) => {
        
        		uni.stopPullDownRefresh();
        		this.list = this.page == 1 ? val.data.list : this.list.concat(val.data.list)
        		if (Math.ceil(val.data.total / this.limit) > this.page) {
        			this.more = true;
        			this.page++
        		} else {
        			this.more = false;
        		}
        	})
        }
    }
}
</script>

<style>
	.page {
		width: 100%;
		/* background-color: #F3F4F8; */
		border-left: 2rpx solid #FFFFFF;
		/* background-color: red; */
		/* overflow: hidden; */
	}

	.bannerBox {
		width: 100%;
		height: 318rpx;
		background-color: #16191C;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.searchBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 702rpx;
		height: 72rpx;
		margin: 16rpx auto 16rpx;
		background-color: #E5E6E9;
	}

	.search {
		width: 90rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #3975EA;
		border-left: 2rpx solid #A8B5C5;
		text-align: center;
		opacity: 1;
	}

	.content {
		overflow-y: auto;
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 24rpx;
	}

	.titleBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		width: 702rpx;
		margin: 20rpx auto 0;
		font-size: 36rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333;
	}

	.kuai {
		width: 24px;
		height: 4px;
		background: rgba(57, 117, 234, 0.39);
		opacity: 1;
		margin: 10rpx 0 0 12rpx;
	}

	.info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 28rpx 0 0 44rpx;
	}

	.infoText {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 11rpx;
		color: #333333;
		opacity: 1;
	}

	.item1 {
		width: 610rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 24rpx 0 0 85rpx;
	}

	text {
		display: inline-block;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #62656D;
		opacity: 1;
	}

	.li {
		display: flex;
		align-items: center;
	}

	.li text:first-child {
		margin-right: 16rpx;
	}

	.footer {
		width: 686rpx;
		height: 64rpx;
		background: rgba(228, 230, 234, 0.39);
		opacity: 1;
		border-radius: 4rpx;
		margin: 24rpx auto 0;
		text-align: center;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #414F58;
		opacity: 1;
	}
	text:hover {
		color: #3975EA;
	}
</style>
